<template>
    <div class="pendingDisposal-box">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多数据"
                :immediate-check="false"
                @load="onLoad"
                >
                <template slot="default">
                    <!-- order展示模块 -->
                    <showTmp 
                        v-for="order in orderList" 
                        :key="order.id" 
                        :dataList="order"
                        :text="'接单'"
                        :type="'number'"
                        :fieldList="[{ message: order.problem ? `技术问题：${order.problem}` : '技术问题：暂无' },
                            { message: order.plan ? `技术方案：${order.plan}` : '技术方案：暂无' }]"
                        @onTitle="getOrderDetail(order.id)"
                        @onSlider="receipt(order.id, agentId)"
                        style="margin-bottom: 5px">
                    </showTmp>
                </template>
            </van-list>  
        </van-pull-refresh>
    </div>
</template>

<script>
import { Dialog } from 'vant'
import { isBottom } from '~/util/index.js'
import publicNum from '@/components/_publicNum'
import showTmp from '~/components/_orderShowTmp.vue'

export default {
    data() {
        return {
            orderList: [],
            agentId: 0,
            loading: false,
            isLoading: false,
            finished: false,
            page: 1
        }
    },
    created() {
        this.init()
        this.getOrderList()
    },
    //缓存也会走的钩子
    deactivated(){
        this.$destroy(true);//销毁组件
    },
    methods: {
        // 获取订单人案件数信息
        init() {
            this.$axios.get('/api/consumer/show').then(res => {
                if(res.status === 200) {
                    this.agentId = res.data.data.id
                }else{
                    that.$toast('请求错误');
                }
            })
        },
        // 获取 order 信息
        getOrderList() {
            this.page = 1
            this.$axios.get('/api/order', {params: {status:'未接单', page: 1}}).then(res => {
                if(res.status === 200) {
                    if(res.data.page.total <= 15) {
                        this.finished = true
                    }else{
                        this.finished = false
                    }
                    this.orderList = res.data.data
                    this.isLoading = false
                }else{
                     that.$toast('请求错误');
                }
            })
        },
        // 获取order详细信息
        getOrderDetail(id) {
            this.$axios.get(`/api/order/${id}`).then(res => {
                if(res.status === 200) {
                    this.$store.commit('getOrderDetailList', res.data.data)
                    this.$router.push(`/admin/order/detail/${id}`)
                }else{
                    that.$toast('请求错误');
                }
            })
        },
        // 接单
        receipt(orderId, agentId) {
            Dialog.confirm({
                title: '消息',
                message: '是否接单'
            }).then(() => {
                this.$axios.post(`/api/order/${orderId}/agent/${agentId}`).then(res => {
                    if(res.status === 200) {
                        Dialog.alert({
                            title: '消息',
                            message: '接单成功!'
                        })
                    }
                })
            }).catch(() => {
                Dialog.close
            });
        },
        onLoad() {
            setTimeout(() => {
                this.$axios.get('/api/order', { params: {
                    status: '未接单',
                    page: this.page + 1
                }}).then(res => {
                    if(res.data.data.length > 0) {
                        this.page++
                        this.orderList.push(...res.data.data)
                        this.loading = false
                    }else{
                        this.loading = false
                        this.finished = true
                    }
                })
            }, 500);
        },
        onRefresh() {
            setTimeout(() => {
                this.getOrderList()
            }, 500);
        }
    },
    components: {
        publicNum,
        showTmp
    }
}
</script>

<style lang="less" scoped>
    .pendingDisposal-box{
        height: 100%;
        overflow: hidden;
        background-color: #eee;

        .van-swipe-cell{
            margin-bottom: 10px;
        }
    }
</style>